<template>
	<view class="headline-bg">
		<view class="headline-card" v-for="item in headlinesData.rows" :key="item._id" @click="toHeadlineDetails">
			<view class="text-item-headline">
				<view class="reminder-item">{{item.title}}</view>
				<view class="doctor-doctor">{{item.digest}}</view>
			</view>
			<view class="item-headline">
				<image src="/static/icons/u3195.png"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		getHealthHeadlinesApi
	} from '../../../api/home';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	
	
	onLoad(() => {
		getData()
	})
	// 健康头条的数据
	const headlinesData = reactive({
		rows: [],
		total: 0
	})
	const getData = () => {
		getHealthHeadlinesApi().then(res => {
			if (res.code == 200) {
				console.log(res);
				headlinesData.rows = res.data.rows
				headlinesData.total = res.data.total
			}
		})
	}
	const toHeadlineDetails = () => {
		uni.navigateTo({
			url: '/HealthHeadlinesPackage/pages/headlinesDetails/headlinesDetails'
		})
	}
</script>

<style lang="scss">
	.headline-bg {
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
		overflow: hidden;
	}

	.headline-card {
		width: 670rpx;
		height: 240rpx;
		margin: 30rpx 40rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		// align-items: center;
	}

	.text-item-headline {
		width: 400rpx;
		height: 80rpx;
		margin-top: 40rpx;
		font-size: 32rpx;
		color: #333333;
	}

	.item-headline {
		margin-top: 30rpx;
		margin-left: 20rpx;

		image {
			width: 160rpx;
			height: 160rpx;
		}
	}

	.reminder-item {
		margin-bottom: 30rpx;
	}

	.doctor-doctor {
		font-size: 24rpx;
		color: #999999;
	}
</style>